<input type="file" id="imageInput" accept="image/*">
<img id="preview" src="" alt="预览" style="max-width: 300px; display: none;">

<script>
// 本地 文件预览
document.getElementById('imageInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        // 直接使用文件创建 Blob URL
        const imageUrl = URL.createObjectURL(file);
        const preview = document.getElementById('preview');

        // 使用示例：在新窗口打开
        window.open(imageUrl, '_blank');

        console.log(imageUrl); // 输出如：blob:https://localhost/8d24029a-...
        
        preview.src = imageUrl;
        preview.style.display = 'block';
        
        // 清理之前的 Blob URL（如果有）
        if (preview.dataset.blobUrl) {
            URL.revokeObjectURL(preview.dataset.blobUrl);
        }
        preview.dataset.blobUrl = imageUrl;
    }
});
</script>